<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 漫展接单小程序</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 h-screen flex items-center justify-center">
    <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
        <div class="text-center mb-8">
            <h1 class="text-3xl font-bold text-indigo-600">漫展接单</h1>
            <p class="text-gray-600 mt-2">连接摄影师与漫展爱好者</p>
        </div>
        
        <form>
            <div class="mb-6">
                <label class="block text-gray-700 text-sm font-bold mb-2" for="phone">
                    手机号码
                </label>
                <input class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="phone" type="tel" placeholder="请输入手机号码">
            </div>
            
            <div class="mb-6">
                <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
                    密码
                </label>
                <input class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="请输入密码">
            </div>
            
            <div class="flex items-center justify-between mb-6">
                <div class="flex items-center">
                    <input id="remember" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                    <label for="remember" class="ml-2 block text-sm text-gray-700">
                        记住我
                    </label>
                </div>
                <a class="inline-block align-baseline text-sm text-indigo-600 hover:text-indigo-800" href="#">
                    忘记密码?
                </a>
            </div>
            
            <div class="mb-6">
                <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
                    登录
                </button>
            </div>
            
            <div class="flex items-center justify-center">
                <span class="text-gray-600 text-sm">还没有账号?</span>
                <a class="ml-1 text-indigo-600 hover:text-indigo-800 text-sm" href="register.html">
                    立即注册
                </a>
            </div>
            
            <div class="mt-8">
                <div class="relative">
                    <div class="absolute inset-0 flex items-center">
                        <div class="w-full border-t border-gray-300"></div>
                    </div>
                    <div class="relative flex justify-center text-sm">
                        <span class="px-2 bg-white text-gray-500">
                            选择角色
                        </span>
                    </div>
                </div>
                
                <div class="mt-6 grid grid-cols-2 gap-3">
                    <div class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold py-3 px-4 rounded text-center cursor-pointer">
                        我是客户
                    </div>
                    <div class="bg-indigo-100 hover:bg-indigo-200 text-indigo-800 font-semibold py-3 px-4 rounded text-center cursor-pointer">
                        我是摄影师
                    </div>
                </div>
            </div>
        </form>
    </div>
</body>
</html>